<template>
  <div>
    <h3>{{ formTitle }}</h3>
    <!-- 搜索产品 -->
    <div v-if="formColumn.formValue" style="padding-bottom: 20px;">
      <el-form ref="form" :model="form" :inline="true">
        <el-form-item :label="formColumn.label" :label-width="'40px'">
          <el-input v-model="form[formColumn.formValue]" suffix-icon="el-icon-search" style="width: 340px;" @input="inputChange($event, formColumn.inputValue)" />
        </el-form-item>
      </el-form>
    </div>
    <!-- 左侧-产品列表 -->
    <el-row :gutter="20" style="display: flex;">
      <el-col :span="8">
        <el-table
          v-if="listSwitch"
          :data="[]"
          :row-class-name="productRowClassName"
          border
          height="309"
          style="width: 100%"
          :header-cell-style="{ backgroundColor: '#F5F7FA' }"
        >
          <el-table-column
            v-for="(it, key) in leftTableColumn"
            :key="key"
            align="center"
            :label="it.label"
            :prop="it.prop"
          />
        </el-table>
        <el-collapse v-else v-model="activeNames" value="array" accordion @change="handleChange">
          <el-collapse-item v-for="(val, key) in tableDataObj" :key="key" :title="key" :name="key">
            <el-table
              ref="table"
              :data="val"
              class="leftTable"
              :row-class-name="productRowClassName"
              border
              height="259"
              :cell-style="{ height: '40px' }"
              style="width: 100%"
              :header-cell-style="{ backgroundColor: '#F5F7FA' }"
              @row-click="productRowClick"
            >
              <template v-for="item in leftTableColumn">
                <el-table-column
                  :key="item.prop"
                  :prop="item.prop"
                  align="center"
                  :label="item.label"
                  :width="item.width"
                />
              </template>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="2" style="display: flex; flex-direction: column; justify-content: space-around;">
        <div>
          <el-button style="width: 100%;" :disabled="sign === 'check'" @click="pushHandle">
            <i class="el-icon-arrow-right" />
          </el-button>
        </div>
        <div>
          <el-button style="width: 100%;" :disabled="sign === 'check'" @click="pushAllHandle">
            <i class="el-icon-d-arrow-right" />
          </el-button>
        </div>
        <div>
          <el-button style="width: 100%;" :disabled="sign === 'product'" @click="deletHandle">
            <i class="el-icon-arrow-left" />
          </el-button>
        </div>
        <div>
          <el-button style="width: 100%;" :disabled="!pushTableData.length" @click="deletAllHandle">
            <i class="el-icon-d-arrow-left" />
          </el-button>
        </div>
      </el-col>
      <!-- 右侧选中的产品列表 -->
      <el-col :span="14">
        <el-table
          ref="tableOne"
          class="rightTable"
          max-height="451"
          :data="pushTableData"
          border
          :row-class-name="checkRowClassName"
          style="width: 100%; border: 1px solid #dfe6ec; border-bottom: none; height: 100%;"
          :header-cell-style="{ backgroundColor: '#F5F7FA' }"
          @row-click="checkRowClick"
        >
          <template v-for="item in rightTableColumn">
            <el-table-column
              v-if="item.status === 'none'"
              id="column"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
            />
            <el-table-column
              v-else-if="item.status === 'check'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
              class="column"
            >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.activityProduct" :disabled="scope.row.disa" @change="checkChange($event, scope.row)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'accAdd'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
              class="column"
            >
              <template slot-scope="scope">
                {{ accAdd(scope.row[item.compute.one], scope.row[item.compute.two]) }}
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'switch'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
              class="column"
              :rules="[
                { required: item.validate, message: '' }
              ]"
            >
              <template slot-scope="scope">
                <span v-show="scope.row.type === '1'">{{ scope.row[item.prop] }}</span>
                <el-form v-show="scope.row.type === '2'" :ref="item.prop" :model="scope.row" label-width="100px" class="demo-ruleForm">
                  <el-form-item
                    :prop="item.prop"
                    align="center"
                    :rules="[
                      { required: item.validate, message: ''}
                    ]"
                  >
                    <el-input v-show="scope.row.type === '2'" v-model="scope.row[item.prop]" class="boxInput" size="small" />
                  </el-form-item>
                </el-form>
                <!-- <el-input v-show="scope.row.type === '2'" v-model="scope.row[item.prop]" size="small" /> -->
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'accReduce'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
              class="column"
            >
              <template slot-scope="scope">
                {{ accReduce(scope.row[item.compute.one], scope.row[item.compute.two]) }}
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'accRide'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
              class="column"
            >
              <template slot-scope="scope">
                {{ accRide(scope.row[item.compute.one], scope.row[item.compute.two]) }}
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'accExcept'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
              class="column"
            >
              <template slot-scope="scope">
                {{ accExcept(scope.row[item.compute.one], scope.row[item.compute.two]) }}
              </template>
            </el-table-column>
            <!-- width="120" -->
            <el-table-column
              v-else-if="item.status === 'input'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              :width="item.width"
              :label="item.label"
            >
              <template slot-scope="scope">
                <el-form :ref="item.prop" :model="scope.row" label-width="100px" class="demo-ruleForm">
                  <el-form-item
                    :prop="item.prop"
                    :rules="[
                      { required: item.validate, message: ''}
                    ]"
                  >
                    <el-input
                      v-model="scope.row[item.prop]"
                      show-word-limit
                      :maxlength="item.maxlength"
                      :style="{ paddingRight: item.maxlength ? '46px' : '' }"
                      size="small"
                      @change="numChangeHandle(item.prop, scope.row, $event)"
                    />
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'date'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              :width="item.width"
              :label="item.label"
            >
              <template slot-scope="scope">
                <el-form :ref="item.prop" :model="scope.row" label-width="100px" class="demo-ruleForm">
                  <el-form-item
                    :prop="item.prop"
                    :rules="[
                      { required: item.validate, message: ''}
                    ]"
                  >
                    <el-date-picker
                      v-model="scope.row[item.prop]"
                      :value-format="item['value-format']"
                      size="small"
                      style="width: 140px;"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                    <!-- <el-input v-model="scope.row[item.prop]" size="small" @change="numChangeHandle(item.prop, scope.row, $event)" /> -->
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.status === 'select'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              show-overflow-tooltip
              :width="item.width"
              :label="item.label"
            >
              <template slot-scope="scope">
                <template v-for="computedItem in computedList">
                  <!-- 两个下拉框联动 -->
                  <el-form v-if="item.dic === computedItem.name && item.dic === 'returnReasonTypeList'" :ref="item.prop" :key="computedItem.name" :model="scope.row" class="demo-ruleForm">
                    <el-form-item
                      :prop="item.prop"
                      :rules="[
                        { required: item.validate, message: ''}
                      ]"
                    >
                      <el-select v-if="item.dic === computedItem.name" v-model="scope.row[item.prop]" filterable style="width: 100%;" size="small" clearable @change="changeHandle(item.prop, $event, scope.row)">
                        <el-option
                          v-for="(el, idx) in selectListObj[computedItem.name][scope.row.reasonType]"
                          :key="idx"
                          :label="el.label"
                          :value="el.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <el-form v-else :ref="item.prop" :key="computedItem.name" :model="scope.row" class="demo-ruleForm">
                    <el-form-item
                      :prop="item.prop"
                      :rules="[
                        { required: item.validate, message: ''}
                      ]"
                    >
                      <el-select v-if="item.dic === computedItem.name" v-model="scope.row[item.prop]" filterable style="width: 100%;" size="small" clearable @change="changeHandle(item.prop, $event, scope.row)">
                        <el-option
                          v-for="(el, idx) in computedItem.list"
                          :key="idx"
                          :label="el.label"
                          :value="el[item.value || 'value']"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </template>
              </template>
            </el-table-column>
            <!-- width="198" -->
            <el-table-column
              v-else-if="item.status === 'img'"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              :label="item.label"
              :width="item.width"
            >
              <template slot-scope="scope">
                <el-form :ref="item.prop" :model="scope.row" class="demo-ruleForm">
                  <el-form-item
                    :prop="item.prop"
                    :rules="[
                      { required: item.validate, message: ''}
                    ]"
                  >
                    <div class="img" @click="imgClick(scope.row.productNum)">
                      <i v-if="!scope.row.img" class="el-icon-folder-add"></i>
                      <el-image
                        v-else
                        style="border-radius: 10px; box-sizing: border-box;"
                        :src="scope.row.img"
                        :preview="[scope.row.img]"
                      />
                    </div>
                    <input :id="scope.row.productNum" :ref="scope.row.productNum" type="file" style="display: none;" @change="beforeAvatarUpload($event, scope.row)">
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 引入的方法要在HTML里用，要在methods里声明
export default {
  name: 'TwoList',
  props: {
    // 标题
    formTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 查询
    formColumn: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 左侧列表列
    leftTableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 右侧列表列
    rightTableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 产品列表
    dataTable: {
      type: Array,
      default: () => {
        return []
      }
    },
    dataTableObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tableActive: {
      type: Array,
      default: () => {
        return []
      }
    },
    twoListSwitch: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 第一次订货的数据
    pushData: {
      type: Array,
      default: () => {
        return []
      }
    },
    reasonTypeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    returnReasonTypeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 客户列表
    customerList: {
      type: Array,
      default: () => {
        return []
      }
    },
    useList: {
      type: Array,
      default: () => {
        return []
      }
    },
    keyQueryWord: {
      type: String,
      default: () => {
        return 'productNum'
      }
    },
    // 动态对应每一条数据的下拉框
    selectListObj: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      // 查询表单数据
      form: {},
      // 产品列表数据
      tableData: [],
      // 产品分类产品列表
      tableDataObj: {},
      // 选中的产品
      checkList: [],
      // 转入的产品
      pushTableData: [],
      // 上一次点击的列表的标志: （product 产品） （check 选中的产品）
      sign: 'product',
      // 产品列表-折叠面板
      activeNames: [],
      imageUrl: '',
      // 返厂原因分类code
      code: '',
      listSwitch: true
    }
  },
  computed: {
    // 获取对应下拉框的数据
    computedList() {
      const list = []
      this.rightTableColumn.forEach((item, index) => {
        if (item.dic) {
          list.push({ name: item.dic, list: this[item.dic] });
        }
      });
      return list
    }
  },
  watch: {
    twoListSwitch(newValue) {
      this.listSwitch = newValue
    },
    activeNames(newValue) {
      this.checkList = [];
    },
    dataTableObj(newValue) {
      this.tableDataObj = newValue;
    },
    tableActive(newValue) {
      this.activeNames = [...newValue];
    },
    pushTableData: {
      deep: true,
      handler(newValue, oldValue) {
        this.$emit('pushListHandle', newValue);
      }
    }
  },
  mounted() {
    this.activeNames = this.tableActive;
    this.tableDataObj = JSON.parse(JSON.stringify(this.dataTableObj));
    if (this.pushData.length > 0) {
      this.pushTableData = this.pushData;
    }
  },
  methods: {
    accAdd, accReduce, accRide, accExcept,
    checkChange(value, row) {
      console.log(123, value, row)
      row.activityProduct = value
      if (value) {
        row.newType = 3
        row.newMoney = row.promotionPrice;
      } else {
        row.newType = 0
        row.newMoney = row.discountPrice;
      }
    },
    // 床垫数量改变事件
    numChangeHandle(name, row, value) {
      if (name === 'num' && row.type === '1') {
        // let num = 0;
        const list = [];
        const obj = {};
        // 循环选中的数据计算所有床垫
        this.pushTableData.forEach(item => {
          if (item.type === '1') {
            // let keys = Object.keys(obj);
            if (list.includes(item.pk_material)) {
              obj[item.pk_material] = this.accAdd(obj[item.pk_material], Math.round(Number(item.num) * Number(item.pillowNum) * 100) / 100);
            } else {
              list.push(item.pk_material);
              obj[item.pk_material] = 0;
              obj[item.pk_material] = Math.round(Number(item.num) * Number(item.pillowNum) * 100) / 100;
            }
          }
        })
        // 赋值对应的枕头
        this.pushTableData.forEach(edit => {
          // 循环找到对应的枕头
          if (edit.productSpecsId === row.pk_material) {
            // 改变枕头的数量
            edit.num = obj[row.pk_material];
          }
        });
      }
    },
    // 设置列表数据
    setList(field) {
      if (this.pushTableData.length) {
        this.pushTableData.forEach(item => {
          item[field] = '';
        });
      }
    },
    // 触发校验
    formValidate() {
      let status = true;
      this.rightTableColumn.forEach(item => {
        if (this.$refs[item.prop]) {
          this.$refs[item.prop].forEach(edit => {
            edit.validate((flag) => {
              if (!flag) {
                status = flag;
                if (item.prop === 'img') {
                  this.$message.error('请选择信誉卡图片')
                  this.$refs.tableOne.$el.children[2].scrollLeft = this.$refs.tableOne.$el.clientWidth
                }
              }
            });
          })
        }
      })
      return status;
    },
    // 移除校验
    clearValidate() {
      this.rightTableColumn.forEach(item => {
        if (this.$refs[item.prop]) {
          this.$refs[item.prop].forEach(edit => {
            edit.clearValidate();
          })
        }
      })
    },
    imgClick(productNum) {
      document.getElementById(productNum).click();
    },
    beforeAvatarUpload(file, row) {
      // 如果取消选择就不往下执行
      if (!file) { return }
      const isJPG = file.target.files[0].type === 'image/jpeg';
      const isPNG = file.target.files[0].type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        return this.$message.error('上传图片只能是 JPG 格式或PNG格式!');
      }
      // if (!isLt2M) {
      //   return this.$message.error('上传图片大小不能超过 2MB!');
      // }
      if (file.target.files[0]) {
        const fileReader = new FileReader();
        // 把文件转换成base64的字符串
        fileReader.readAsDataURL(file.target.files[0]);
        fileReader.onload = function(e) {
          // base64的图片
          row.img = e.target.result;
        }
        row.file = file.target.files[0]
      }
    },
    // 筛选事件
    inputChange(value, list) {
      // 判断是否输入了内容，判断是否有查询的字段
      if (value && list && list.length > 0) {
        // 初始化对象
        const listObj = {}
        // 循环需要查询的字段
        list.forEach((edit, index) => {
          listObj[edit] = [];
          // 看这类产品中是否存在查询的内容
          listObj[edit] = this.dataTable.filter(oneItem => {
            // 循环列表是否存在查询的内容，有就返回
            return oneItem[edit].toString().toLocaleUpperCase().includes(value.toLocaleUpperCase())
          });
        })
        // 清空数据
        this.tableData = [];
        // 都有哪些类型
        const keyList = Object.keys(listObj);
        let flagTwo = true
        // 获取每一个分类数组中的值
        keyList.forEach((objKeyItem, objKeyIndex) => {
          // 判断每一个数组是否有值
          if (listObj[objKeyItem].length > 0) {
            flagTwo = false
            listObj[objKeyItem].forEach(one => {
              // 查询出的数据是否是当前折叠面板显示的分类
              // if (one.typeName === this.activeNames[0]) {
              // 判断是否在选中的数组中存在该条数据，如果存在不能显示
              const flagOne = this.pushTableData.some(pushItem => {
                return one[this.keyQueryWord] === pushItem[this.keyQueryWord]
              })
              if (!flagOne) {
                // 如果找到了放到统一的数组中
                this.tableData.push(one)
              }
              // }
            })
          }
        })
        if (flagTwo) {
          this.listSwitch = true
        } else {
          this.listSwitch = false
        }
        const tableDataObj = {};
        const listArr = [];
        this.tableData.forEach(item => {
          if (listArr.includes(item.typeName)) {
            tableDataObj[item.typeName].push(item)
          } else {
            listArr.push(item.typeName);
            tableDataObj[item.typeName] = []
            tableDataObj[item.typeName].push(item)
          }
        })
        this.tableDataObj = tableDataObj
        this.resetCollapse();
      } else {
        const tableDataObj = {};
        const listArr = [];
        this.dataTable.forEach((item, index) => {
          // 跳过选中的数据
          const flagOne = this.pushTableData.some(pushItem => {
            return item[this.keyQueryWord] === pushItem[this.keyQueryWord]
          })
          // 是否是选中的数据，不是就放入
          if (!flagOne) {
            if (listArr.includes(item.typeName)) {
              tableDataObj[item.typeName].push(item)
            } else {
              listArr.push(item.typeName);
              tableDataObj[item.typeName] = []
              tableDataObj[item.typeName].push(item)
            }
          }
        })
        this.tableDataObj = tableDataObj;
        this.listSwitch = false
      }
    },
    // 产品列表点击事件: 默认点击奇数次为选中，点击偶数次为取消选中
    // 如果点击的是右侧的数据就不能点击转入
    // 无论点击哪一侧的列表，都要先清空之前选中的数据
    productRowClick(row) {
      // 判断上一次点击的列表是不是选中的产品列表，如果是就重新定义
      if (this.sign === 'check') {
        this.sign = 'product';
        this.checkList = [];
      }
      let i = this.checkList.length - 1; let flag = false; let number;
      for (i; i >= 0; i--) {
        // 判断点击的这条数据是否已经在checkList数组中
        if (this.checkList[i][this.keyQueryWord] === row[this.keyQueryWord]) {
          flag = true;
          number = i;
        }
      }
      // 判断点击的数据是否在checkList数组中
      if (flag) {
        // 已存在就删除他
        this.checkList.splice(number, 1);
      } else {
        // 不存在就填加他
        this.checkList.push(row);
      }
    },
    // 选中产品列表的点击事件: 默认点击奇数次为选中，点击偶数次为取消选中
    // 如果点击的是左侧的数据就不能点击转出
    // 无论点击哪一侧的列表，都要先清空之前选中的数据
    checkRowClick(row) {
      // 判断上一次点击的列表是不是产品列表，如果是就重新定义
      if (this.sign === 'product') {
        this.sign = 'check';
        this.checkList = [];
      }
      let i = this.checkList.length - 1; let flag = false; let number;
      for (i; i >= 0; i--) {
        // 判断点击的这条数据是否已经在checkList数组中
        if (this.checkList[i][this.keyQueryWord] === row[this.keyQueryWord]) {
          flag = true;
          number = i;
        }
      }
      // 判断点击的数据是否在checkList数组中
      if (flag) {
        // 已存在就删除他
        this.checkList.splice(number, 1);
      } else {
        // 不存在就填加他
        this.checkList.push(row);
      }
    },
    // 列表的行的样式，选中的数据高亮显示；
    productRowClassName({ row, rowIndex }) {
      let i = this.checkList.length - 1;
      for (i; i >= 0; i--) {
        if (this.checkList[i][this.keyQueryWord] === row[this.keyQueryWord]) {
          return 'success-row';
        }
      }
      return '';
    },
    // 列表的行的样式，选中的数据高亮显示
    checkRowClassName({ row, rowIndex }) {
      let i = this.checkList.length - 1;
      for (i; i >= 0; i--) {
        if (this.checkList[i][this.keyQueryWord] === row[this.keyQueryWord]) {
          return 'success-row';
        }
      }
      return '';
    },
    // 添加对应的枕头
    handlePillow(row) {
      // 先判断是否需要枕头
      // 床的个数
      // 对应枕头数 等于 床的个数乘以对应枕头数
      // 枕头的productSpecsId
      // 在产品列表中找到枕头分类中对应的枕头，删除对应的的枕头，并把这个数据放入选中的列表中
      let obj = null; // 保存对应的数据
      let ind = 0; // 保存对应的下标
      let flag = false; // 是否已经选中

      // 查看选中的产品中是否存在对应的枕头
      this.pushTableData.forEach(edit => {
        if (row.pk_material === edit.productSpecsId) {
          edit.num = this.accAdd(edit.num, this.accRide(Number(row.num), Number(row.pillowNum)));
          flag = true;
        }
      })
      if (!flag) {
        this.dataTable.forEach((item, index) => {
          if (row.pk_material === item.productSpecsId) {
            obj = item;
          }
        })
        if (this.tableDataObj['枕头']) {
          this.tableDataObj['枕头'].forEach((tableItem, tableIndex) => {
            if (row.pk_material === tableItem.productSpecsId) {
              ind = tableIndex;
            }
          })
        }
        if (obj) {
          obj.num = Number(row.num) * Number(row.pillowNum);
          this.pushTableData.push(obj);
        }
        if (obj && this.tableDataObj['枕头']) {
          // 删除这条数据
          this.tableDataObj['枕头'].splice(ind, 1);
        }
      }
    },
    // 减少对应的枕头
    handlePillowReduce(row) {
      // 床的个数
      // 对应枕头数 等于 床的个数乘以对应枕头数
      // 枕头的productSpecsId

      // 在选中的产品列表中找到对应的枕头，减少对应的的枕头数量，如果数量不够就在选中的列表中删除枕头，并把这个数据放入产品列表中
      const reducePillowNum = this.accRide(Number(row.num), Number(row.pillowNum)); // 需要减少的枕头数量

      for (let i = this.pushTableData.length - 1; i >= 0; i--) {
        const edit = this.pushTableData[i];
        if (row.pk_material === edit.productSpecsId) {
          if (reducePillowNum < edit.num) {
            edit.num = this.accReduce(edit.num, reducePillowNum);
          } else {
            // 减少对应的枕头
            this.pushTableData.splice(i, 1);
            // 判断是否有枕头的分类
            if (this.tableDataObj['枕头']) {
              // 查询是否有枕头了
              const list = this.tableDataObj['枕头'].filter((item, index) => {
                return item.productSpecsId === edit.productSpecsId
              })
              // 如果没有添加进去
              if (list.length === 0) {
                edit.num = 1;
                this.tableDataObj['枕头'].push(edit);
                // 排序
                this.tableDataObj['枕头'].sort((a, b) => {
                  return a.index - b.index;
                })
              }
            }
          }
        }
      }
    },
    // 转入事件
    pushHandle() {
      // 如果没有选中数据就不往下执行
      if (!this.checkList.length) { return }
      let i = this.checkList.length - 1; let j = this.tableDataObj[this.activeNames[0]].length - 1;
      for (i; i >= 0; i--) {
        const flag = this.pushTableData.some(item => {
          return item[this.keyQueryWord] === this.checkList[i][this.keyQueryWord]
        })
        if (flag) { return }
        for (j; j >= 0; j--) {
          // 把选中的数据从产品列表中删除
          this.tableDataObj[this.activeNames[0]][j][this.keyQueryWord] === this.checkList[i][this.keyQueryWord] &&
          this.tableDataObj[this.activeNames[0]].splice(j, 1);
        }
        // 把选中的数据添加到转入数组（pushTableData）
        // JSON.parse(JSON.stringify(this.checkList[i]))
        this.pushTableData.unshift({ ...this.checkList[i] });
        // 先判断是否需要枕头
        if (this.checkList[i].pillowNum) {
          // 添加对应的枕头
          this.handlePillow(this.checkList[i]);
        }
        // 重置
        j = this.tableDataObj[this.activeNames[0]].length - 1;
      }
      this.pushTableData.sort((a, b) => {
        return a.index - b.index;
      })
      // 清除上传文件的输入框的值
      this.$nextTick(() => {
        if (document.querySelector('input[type="file"]')) {
          document.querySelector('input[type="file"]').value = ''
        }
      })
      // 清空选中的数组
      this.checkList = [];
      this.$emit('pushListHandle', this.pushTableData)
    },
    // 转入所有
    pushAllHandle() {
      // 如果没有选中数据就不往下执行
      const list = JSON.parse(JSON.stringify(this.tableDataObj[this.activeNames[0]]));
      list.map(item => {
        this.pushTableData.push(JSON.parse(JSON.stringify(item)));
        // 先判断是否需要枕头
        if (item.pillowNum) {
          // 添加对应的枕头
          this.handlePillow(item);
        }
      })
      this.tableDataObj[this.activeNames[0]] = [];
      this.resetCollapse();
      this.tableData = [];
      this.sign = 'check';
      this.$emit('pushListHandle', this.pushTableData)
    },
    // 转出事件
    deletHandle() {
      // 如果没有选中数据就不往下执行
      if (!this.checkList.length) { return }
      let i = this.checkList.length - 1;
      let j = this.pushTableData.length - 1;
      for (i; i >= 0; i--) {
        for (j; j >= 0; j--) {
          // 把选中的数据从选中的产品列表中删除
          this.pushTableData[j][this.keyQueryWord] === this.checkList[i][this.keyQueryWord] && this.pushTableData.splice(j, 1);
        }
        // 是否需要减少枕头
        if (this.checkList[i].pillowNum) {
          // 减少对应的枕头
          this.handlePillowReduce(this.checkList[i]);
        }
        this.checkList[i].num = 1;
        if (this.tableDataObj[this.checkList[i].typeName]) {
          this.tableDataObj[this.checkList[i].typeName].push(this.checkList[i])
        }
        // 重置
        j = this.pushTableData.length - 1;
        if (this.tableDataObj[this.checkList[i].typeName]) {
          this.tableDataObj[this.checkList[i].typeName].sort((a, b) => {
            return a.index - b.index;
          })
        }
      }
      // 清空选中的数组
      this.checkList = [];
      this.$emit('pushListHandle', this.pushTableData)
    },
    // 转出所有
    deletAllHandle() {
      // 如果没有选中数据就不往下执行
      if (this.pushTableData.length > 0) {
        this.pushTableData.forEach(item => {
          item.num = 1;
          if (this.tableDataObj[item.typeName]) {
            this.tableDataObj[item.typeName].push(item);
          }
        })
      }
      this.pushTableData = [];
      // 清空选中的数组
      this.checkList = [];
      this.sign = 'product';
      this.$emit('pushListHandle', this.pushTableData)
    },
    // 重置数据
    reset() {
      this.form = {};
      this.tableData = [];
      // 产品分类产品列表
      this.tableDataObj = {};
      this.checkList = [];
      this.pushTableData = [];
    },
    // 折叠面板事件
    handleChange(val) {
      this.activeNames = [val]
    },
    // 返厂原因分类，查询，返厂原因
    changeHandle(type, data, value) {
      this.$emit('changeCode', { type, data, value });
      // 写死联动对应的值
      if (type === 'reasonType') {
        value.reason = ''
      }
    },
    resetCollapse() {
      const listA = [];
      this.activeNames.forEach(edit => {
        if (edit) {
          listA.push(edit);
        }
      });
      this.activeNames = [...listA];
    }
  }
}
</script>
<!-- <style lang="scss" scoped>
  ::v-deep .boxInput {
    input {
      text-align: center;
    }
  }
  ::v-deep .el-table tr:hover td {
    background-color: transparent !important;
  }
  ::v-deep .column ::v-deep .el-tooltip {
    margin-top: -16px;
  };

  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  };
  .rightTable {
    display: flex;
    flex-direction: column;
  }
  ::v-deep .el-table__body-wrapper {
    flex: 1;
  }
  .leftTable ::v-deep .cell {
    height: 22px;
    line-height: 22px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
  .rightTable ::v-deep .cell {
    // height: 40px;
    // line-height: 40px;
  }
  .img {
    color: #8c939d;
    width: 178px;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px dashed #8c939d;
    box-sizing: border-box;
  }
  .img:hover {
    border: 1px dashed #1E90FF;
  }
  .el-table ::v-deep .success-row {
      background: oldlace;
  }
  ::v-deep .el-collapse-item__wrap {
    padding-bottom: 0;
    border-bottom: 0;
  }
  ::v-deep .el-collapse-item__content {
    padding-bottom: 0;
  }
  ::v-deep .el-table__body-wrapper {
    max-height: 6000px !important;
  }
  // 滚动条的宽度
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
</style> -->
